<template>
  <div class="item1">
    <div class="breadcrumb" :gutter="24">
      {{$t('menu.audit_trail')}}
      <!--            <div class="btngroup" style="padding-right:15px">-->
      <!--                <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>-->
      <!--                <el-button type="primary" size="small" @click="handleSearch">导 出</el-button>-->
      <!--            </div>-->
      <el-form ref="form" :model="formData" label-width="70px" size="small">
        <el-row :gutter="28">
          <!-- <el-col :xs="3" :sm="1" :md="1" :lg="1" :xl="1">
                        <el-button type="primary" size="small" :icon="'iconfont ' + icon" class="change" @click="changePattern"></el-button>
                    </el-col> -->
          <!--                    <el-col :xs="9" :sm="6" :md="8" :lg="4" :xl="4" style="padding-top:10px">-->
          <!--                        <el-form-item label="$t('common.keyword')">-->
          <!--                            <el-input v-model="formData.keyword" clearable placeholder=""></el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <el-col :xs="12" :sm="8" :md="10" :lg="6" :xl="6" class="titmepicker" style="padding-top:10px">
            <el-form-item :label="$t('recipe.starting_and_ending_time')">
              <el-date-picker v-model="formData.time" type="daterange" :unlink-panels="true" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="9" :sm="6" :md="6" :lg="3" :xl="3" style="padding-top:10px">
            <el-form-item :label="$t('common.type')" label-width="40px" class="spread">
              <el-select v-model="formData.type" placeholder="" clearable>
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :sm="8" :md="8" :lg="3" :xl="3" style="padding-top:10px">
            <el-form-item :label="$t('workorder.work_order_number')" class="spread">
              <el-input v-model="formData.woId" clearable placeholder=""></el-input>
              <!--                            <el-select -->
              <!--                                v-model="formData.woId" -->
              <!--                                remote -->
              <!--                                filterable-->
              <!--                                :remote-method="remoteMethod"-->
              <!--                                placeholder="" -->
              <!--                                v-el-select-loadmore="loadMoreFun" -->
              <!--                                clearable-->
              <!--                            >-->
              <!--								<el-option v-for="(item,index) in workOrder" :key="index" :label="item.woId" :value="item.woId"></el-option>-->
              <!--							</el-select>-->
            </el-form-item>
          </el-col>

          <el-col :xs="10" :sm="8" :md="8" :lg="3" :xl="3" style="padding-top:10px">
            <el-form-item :label="$t('common.operator')" class="spread">
              <!-- <el-select v-model="formData.woId" remote filterable :remote-method="remoteMethod" placeholder=""
                v-el-select-loadmore="loadMoreFun" clearable>
                <el-option v-for="(item,index) in workOrder" :key="index" :label="item.woId" :value="item.woId"></el-option>
              </el-select> -->
              <el-select v-model="formData.userId" remote filterable :remote-method="remoteMethod" placeholder=""
                v-el-select-loadmore="loadMoreFun" clearable>
                <el-option v-for="(item,index) in userList" :key="index" :label="item.frealName" :value="item.fid"></el-option>
              </el-select>

            </el-form-item>

          </el-col>

          <el-col :xs="10" :sm="8" :md="8" :lg="4" :xl="4" style="padding-top:10px">
            <el-form-item :label="$t('recipe.formula_name')" class="spread">
              <el-input v-model="formData.recipeName" clearable placeholder=""></el-input>
              <!--                            <el-select -->
              <!--                                v-model="ruleForm.equipment" -->
              <!--                                filterable -->
              <!--                                remote-->
              <!--                                placeholder="" -->
              <!--                                clearable-->
              <!--                                :remote-method="remoteMethod1"-->
              <!--                                v-el-select-loadmore="loadMoreFun1"-->
              <!--                            >-->
              <!--                                <el-option v-for="(item,index) in equipmentList" :key="index" :label="item.entName" :value="item.fid"></el-option>-->
              <!--                            </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :xs="10" :sm="8" :md="8" :lg="4" :xl="4" style="   float: right;">
            <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
            <el-button type="primary" size="small" @click="handleExport">{{ $t("common.export") }}</el-button>
          </el-col>
        </el-row>

      </el-form>

    </div>

    <!-- 表格区域 -->
    <div class="tableAuto">
      <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" v-if="!isCard" ref="refTable" highlight-current-row>
        <!-- <el-table-column label="" width="50" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
                        </div>
                    </template>
                </el-table-column> -->
        <el-table-column type="index" :label="$t('common.number')" width="80" align="center">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="time" show-overflow-tooltip :label="$t('recipe.starting_and_ending_time')" width="150" />

        <el-table-column prop="type" show-overflow-tooltip :label="$t('common.type')" width="80">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? '登入登出' :  scope.row.type == 1 ? '配方修改' : scope.row.type == 2 ? '操作记录' : scope.row.type == 4 ? '基础配置':''}}
          </template>
        </el-table-column>
        <!--                <el-table-column prop="priority"                  show-overflow-tooltip label="优先级"    width="80">-->
        <!--                    <template slot-scope="scope">-->
        <!--                        {{ getPriorityName(scope.row.priority) }}-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <el-table-column prop="woId" show-overflow-tooltip :label="$t('workorder.work_order_number')" width="100" />
        <el-table-column prop="recipeName" show-overflow-tooltip :label="$t('recipe.formula_name')" width="100">
          <template slot-scope="scope">
            {{scope.row.recipeName }}
          </template>
        </el-table-column>
        <el-table-column prop="jobName" show-overflow-tooltip :label="$t('recipe.assignment_name')" width="100" />
        <el-table-column prop="phaseName" show-overflow-tooltip :label="$t('basic.stage_name')" width="100" />

        <el-table-column prop="description" show-overflow-tooltip :label="$t('common.describe')" />
        <el-table-column prop="userId" show-overflow-tooltip :label="$t('common.operator')" width="90" />

      </el-table>
    </div>
    <!-- 卡片区域 -->
    <div v-if="isCard">
      <div class="cardBox" style="overflow-x: hidden;" :style="{height:height+'px'} ">
        <el-row :gutter="25">
          <template v-for="(item,index) in tableData">
            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4" :key="index">
              <div class="card" :key="index" :class="[index == cardIndex ? 'selectCard' : '']" @click="handleIndex(index,item)">
                <p class="time" style="font-weight:bold">类型名称：{{item.className}}</p>
                <div class="time">
                  <el-tooltip :content="item.description" effect="dark" placement="top">
                    <p class="Desc">物料描述：{{item.description}}</p>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </template>
          <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
        </el-row>
      </div>
    </div>

    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 50, 100]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { scheduling } from "@/api/scheduling"
export default {
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: 'calc(100vh - 230px)',
      formData: {
        startTime: "",
        endTime: "",
        type: "",
        woId: "",
        userId: "",
        recipeName: "",
        time: []
      },
      ruleForm: {
        time: "",
        type: "",
        userId: "",
        station: "",
        stationIp: "",
        description: "",
        woId: "",
        jobId: "",
        unitId: "",
        phaseId: "",
      },
      icon: "icon-biaoge",
      loading: false,
      tableData: [],
      tableLoading: false,
      radioId: "",
      pager: {
        field: "fLastModifyTime",
        order: "DESC",
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      isCard: false,
      cardIndex: -1,
      currObj: {},
      typeList: [{
        label: '登入登出',
        value: 0
      }, {
        label: '配方修改',
        value: 1
      }, {
        label: '操作记录',
        value: 2
      }, {
        label: '基础配置',
        value: 4
      }],
      workOrder: [],
      userList: [],
      wordPage: {
        pageNum: 1,
        pageSize: 20,
        keyword: ""
      },
      equipmentList: [],
      equipmentPage: {
        pageNum: 1,
        pageSize: 20,
        keyword: ''
      }
    }
  },
  created () {
    let startTime = this.$util.getXmonthToday(-1)
    let endTime = this.$util.format(new Date(), 'YYYY-MM-DD')
    this.formData.time = [new Date(startTime), new Date(endTime)]
    this.getAuditTrailList()
    this.workOrderList()
    this.auditUserList()
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1;
      this.getAuditTrailList()
    },
    getAuditTrailList () {
      if (this.formData.time && this.formData.time.length > 0) {
        this.formData.startTime = this.$util.format(this.formData.time[0], 'YYYY-MM-DD')
      }
      if (this.formData.time && this.formData.time.length > 0) {
        this.formData.endTime = this.$util.format(this.formData.time[1], 'YYYY-MM-DD')
      }

      const param = {
        // time:this.formData.time,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        type: this.formData.type,
        woId: this.formData.woId,
        recipeName: this.formData.recipeName,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        order: this.pager.order,
        field: this.pager.field,
        userId: this.formData.userId,
      }
      console.log(param)
      this.tableLoading = true
      configure.getAuditTrailList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getAuditTrailList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getAuditTrailList()
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.currObj = row;
      this.$refs.refTable.setCurrentRow(row);
    },
    handleIndex (index, row) {
      this.cardIndex = index
      this.radioId = row.fid;
    },
    changePattern () {
      this.isCard = !this.isCard
      this.radioId = ''
      this.cardIndex = -1
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    //获取工单
    workOrderList () {
      const param = {
        page: this.wordPage.pageNum,
        size: this.wordPage.pageSize,
        woId: this.wordPage.keyword,
        // stateCds:[3,6,5]
      }
      scheduling.workOrderList(param).then(res => {
        if (res.code == 200) {
          this.workOrder = [...this.workOrder, ...res.data.rows]
        }
      })
    },

    auditUserList () {
      configure.getAuditUserList().then(res => {
        if (res.code == 200) {
          this.userList = res.data
        }
      })
    },
    //下拉加载更多工单
    loadMoreFun () {
      this.wordPage.pageNum++
      this.workOrderList()
    },
    //远程搜索配方名称
    remoteMethod (keyword) {
      this.wordPage.keyword = keyword.trim();
      this.wordPage.pageNum = 1
      setTimeout(() => {
        this.workOrder = []
        this.workOrderList()
      }, 200)
    },
    getEquipmentList () {
      const param = {
        entName: '',
        page: this.equipmentPage.pageNum,
        size: this.equipmentPage.pageSize,
      }
      configure.getEquipmentList(param).then(res => {
        if (res.code == 200) {
          this.equipmentList = res.data.rows
        }
      })
    },

    //下拉加载更多设备
    loadMoreFun1 () {
      this.equipmentPage.pageNum++
      this.workOrderList()
    },
    remoteMethod1 (keyword) {
      this.equipmentPage.keyword = keyword.trim();
      this.equipmentPage.pageNum = 1
      setTimeout(() => {
        this.equipmentList = []
        this.getEquipmentList()
      }, 200)
    },
    handleExport () {
      const that = this
      if (this.formData.time && this.formData.time.length > 0) {
        this.formData.startTime = this.$util.format(this.formData.time[0], 'YYYY-MM-DD')
      }
      if (this.formData.time && this.formData.time.length > 0) {
        this.formData.endTime = this.$util.format(this.formData.time[1], 'YYYY-MM-DD')
      }
      const param = {
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        type: this.formData.type,
        woId: this.formData.woId,
        recipeName: this.formData.recipeName,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        order: this.pager.order,
        field: this.pager.field
      }
      configure.exportXls(param).then(res => {
        console.log(res)
        let fileReader = new FileReader();
        fileReader.onload = function () {
          try {
            let jsonData = JSON.parse(this.result);
            if (jsonData.code) {
              that.$message.error('暂无数据');
            }
          } catch (err) {
            let _name = `审计追踪.xls`
            that.$util.exportDown(_name, res)
          }
        };
        fileReader.readAsText(res);
      })
      // this.exportExcel(param, `http://61.240.138.156:350/rest/hisAuditTrail/exportXls`);
    },
    exportExcel (url, params) {
      let form = document.createElement("form");
      form.action = url;
      form.method = "get";
      form.target = "_blank";
      form.acceptCharset = "utf-8";
      document.body.appendChild(form);

      for (let key in params) {
        let input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = params[key];
        form.appendChild(input);
      }

      form.submit();
      form.removeChild(form);
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    getPriorityName (type) {
      if (type == 1) {
        return '调试'
      } else if (type == 2) {
        return '错误'
      } else if (type == 3) {
        return ''
      } else if (type == 4) {
        return '信息'
      } else if (type == 5) {
        return '警告'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.btngroup {
  float: right;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
.isShowDialog >>> .el-select {
  width: 100%;
}
.tableAuto,
.cardBox {
  clear: both;
}
.pagination-area {
  padding-top: 10px;
}
.Desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardBox {
  overflow-y: auto;
}
.card {
  background: #eaebec;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
}
.card p {
  font-size: 12px;
  line-height: 22px;
  transform: scale(0.9);
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  font-weight: bold;
}
.selectCard {
  background: #f6fbff;
}
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    width: 19.83333%;
  }
}
.spread >>> .el-select {
  width: 100%;
}
</style>
